<template>
  <div class="question-tabs-bar flex items-center justify-center px-4 pt-2 pb-2">
    <div class="tab-scroll flex gap-2 overflow-x-auto no-scrollbar justify-center">
      <div v-for="tab in tabs" :key="tab.value" class="tab-item" :class="{ active: activeTab === tab.value }"
        @click="onTab(tab.value)">
        <span class="tab-label">{{ tab.label }}</span>
        <span class="tab-underline" />
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  tabs: Array,
  activeTab: String
})
const emit = defineEmits(['update:activeTab'])
function onTab(val) {
  emit('update:activeTab', val)
}
</script>
<style scoped>
.tab-scroll {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: center;
  border-bottom: 1px;
  border-style: solid;
  border-color: #e5e7eb;
  margin-bottom: 10px;
}

.tab-item {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  padding: 0 23px;
  cursor: pointer;
  color: #000;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  height: 52px;
  background: transparent;
  white-space: nowrap;
  user-select: none;
}

.tab-item:hover {
  background-color: var(--fill-1);
}

.tab-item.active {}

.tab-label {
  position: relative;
  z-index: 2;
  line-height: 1;
  display: flex;
  align-items: center;
}

.tab-underline {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0px;
  height: 2.5px;
  border-radius: 2px;
  background: rgb(46 85 146 / var(--tw-border-opacity, 1));
  opacity: 0;
  transition: opacity 0.2s, left 0.2s, right 0.2s, background 0.2s;
  z-index: 1;
}

.tab-item.active .tab-underline {
  opacity: 1;
}
</style>